<template>
	<view>
		<scroll-view :scroll-y="modalName==null" class="page" :class="modalName!=null?'show':''">
			<cu-custom bgColor="bg-gradual-pink" :isBack="true">
				<!-- <block slot="backText">返回</block> -->
				<block slot="content">我的</block>
			</cu-custom>
			<view v-if="!hasLogin">
				<button type="default" @click="goToLogin">您还未登录~</button>
			</view>
			<view class="" v-if="hasLogin">
				
			
				<view class="user" @click="goSetUser">
					<view class="touxiang" >
						<u-avatar :src="userInfo.avatar" :show-sex='true' :sex-icon='userInfo.sex'></u-avatar>
						
					</view>
					<view class="userInfo">
						<view class="userName">
							用户名:{{userInfo.nickName?userInfo.nickName:userInfo.mobile}}
						</view>
						<view class="acount">
							拾光号:{{userInfo.shiguang}}
						</view>
					</view>
					<view class="rightIcon">
						<u-icon  size="40" name="arrow-right"></u-icon>
					</view>
				</view>
				<!-- <view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class="cuIcon-title text-orange "></text> 宫格列表
					</view>
					<view class="action">
						<button class="cu-btn bg-green shadow" @tap="showModal" data-target="gridModal">设置</button>
					</view>
				</view> -->
				<view class="cu-modal" :class="modalName=='gridModal'?'show':''" @tap="hideModal">
					<view class="cu-dialog" @tap.stop>
						<radio-group class="block" @change="Gridchange">
							<view class="cu-list menu text-left">
								<view class="cu-item" v-for="(item,index) in 3" :key="index">
									<label class="flex justify-between align-center flex-sub">
										<view class="flex-sub">{{index +3}} 列</view>
										<radio class="round" :value="(index + 3) + ''" :class="gridCol==index+3?'checked':''" :checked="gridCol==index+3"></radio>
									</label>
								</view>
							</view>
						</radio-group>
						<view class="cu-list menu text-left solid-top">
							<view class="cu-item">
								<view class="content">
									<text class="text-grey">边框</text>
								</view>
								<view class="action">
									<switch @change="Gridswitch" :class="gridBorder?'checked':''" :checked="gridBorder?true:false"></switch>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-list grid" :class="['col-' + gridCol,gridBorder?'':'no-border']">
					<view class="cu-item animation-scale-up" v-for="(item,index) in cuIconList" :key="index" v-if="index<gridCol*2">
						<view :class="['cuIcon-' + item.cuIcon,'text-' + item.color]">
							<view class="cu-tag badge" v-if="item.badge!=0">
								<block v-if="item.badge!=1">{{item.badge>99?'99+':item.badge}}</block>
							</view>
						</view>
						<text>{{item.name}}</text>
					</view>
				</view>


				<!-- <view class="cu-bar bg-white solid-bottom margin-top">
					<view class="action">
						<text class="cuIcon-title text-orange"></text> 菜单列表
					</view>
					<view class="action">
						<button class="cu-btn bg-green shadow" @tap="showModal" data-target="menuModal">设置</button>
					</view>
				</view> -->
				<view class="cu-modal" :class="modalName=='menuModal'?'show':''" @tap="hideModal">
					<view class="cu-dialog" @tap.stop>
						<view class="cu-list menu text-left solid-top">
							<view class="cu-item">
								<view class="content">
									<text class="text-grey">短边框</text>
								</view>
								<view class="action">
									<switch @change="MenuBorder" :class="menuBorder?'checked':''" :checked="menuBorder?true:false"></switch>
								</view>
							</view>
							<view class="cu-item">
								<view class="content">
									<text class="text-grey">箭头</text>
								</view>
								<view class="action">
									<switch @change="MenuArrow" :class="menuArrow?'checked':''" :checked="menuArrow?true:false"></switch>
								</view>
							</view>
							<view class="cu-item">
								<view class="content">
									<text class="text-grey">卡片</text>
								</view>
								<view class="action">
									<switch @change="MenuCard" :class="menuCard?'checked':''" :checked="menuCard?true:false"></switch>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="cu-list menu" :class="[menuBorder?'sm-border':'',menuCard?'card-menu margin-top':'']">
					
					<!-- <view class="cu-item" :class="menuArrow?'arrow':''">
						<view class="content animation-slide-top" >
							<image src="/static/logo.png" class="png" mode="aspectFit"></image>
							<text class="text-grey">图片 + 标题</text>
						</view>
					</view> -->
					
					
					<view class="cu-item" :class="menuArrow?'arrow':''">
						<view class="content animation-slide-left">
							<text class="cuIcon-emojiflashfill text-pink"></text>
							<text class="text-grey">头像组</text>
						</view>
						<view class="action animation-slide-right">
							<view class="cu-avatar-group">
								<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg);"></view>
								<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big81005.jpg);"></view>
								<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big25002.jpg);"></view>
								<view class="cu-avatar round sm" style="background-image:url(https://ossweb-img.qq.com/images/lol/web201310/skin/big91012.jpg);"></view>
							</view>
							<text class="text-grey text-sm">4 人</text>
						</view>
					</view>
					
					<view class="cu-item animation-slide-bottom" :class="menuArrow?'arrow':''" :style="[{animationDelay: (3 + 1)*0.1 + 's'}]">
						<view class="content">
							<text class="cuIcon-tagfill text-red  margin-right-xs"></text>
							<text class="text-grey">标签</text>
						</view>
						<view class="action">
							<view class="cu-tag round bg-orange light">音乐</view>
							<view class="cu-tag round bg-olive light">电影</view>
							<view class="cu-tag round bg-blue light">旅行</view>
						</view>
					</view>
					<view class="cu-item" :class="menuArrow?'arrow':''">
						<button class="cu-btn content animation-slide-bottom" open-type="contact" @click="goPass" >
							<text class="cuIcon-btn text-olive"></text>
							<text class="text-grey">设置密码</text>
						</button>
					</view>
					<view class="cu-item" :class="menuArrow?'arrow':''">
						<button class="cu-btn content animation-slide-bottom" open-type="contact" @click="bindLogout" :loading="logoutBtnLoading">
							<text class="cuIcon-btn text-olive"></text>
							<text class="text-grey">退出登录</text>
						</button>
					</view>
					
					
				</view>
			
			</view>
			

		</scroll-view>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex'
	import {
		univerifyLogin
	} from '@/common/univerify.js'
	export default {
		computed: mapState(['forcedLogin', 'hasLogin', 'userName']),
		data() {
			return {
				cuIconList: [
					{
					cuIcon: 'cardboardfill',
					color: 'red',
					badge: 120,
					name: 'VR'
					  }, {
						cuIcon: 'recordfill',
						color: 'orange',
						badge: 1,
						name: '录像'
					}, {
						cuIcon: 'picfill',
						color: 'yellow',
						badge: 0,
						name: '图像'
					}, {
						cuIcon: 'noticefill',
						color: 'olive',
						badge: 22,
						name: '通知'
					}, {
						cuIcon: 'upstagefill',
						color: 'cyan',
						badge: 0,
						name: '排行榜'
					}, {
						cuIcon: 'clothesfill',
						color: 'blue',
						badge: 0,
						name: '皮肤'
					},
				],
				modalName: null,
				gridCol: 3,
				gridBorder: true,
				menuBorder: false,
				menuArrow: true,
				menuCard: false,
				skin: false,
				listTouchStart: 0,
				listTouchDirection: null,
				userInfo:{
					avatar:'/static/avatar.png',
				},
				logoutBtnLoading: false,
			};
		},
		onLoad() {
			this.getUserInfo()
		},
		
		mounted() {
			uni.$on('checkUserIngo',res=>{
				console.log(res,'ssss撒范德萨发')
				if(res==true){
					this.getUserInfo()
				}
			})
		},
		onUnload(){
			uni.$off('checkUserIngo')
		},
		methods: {
			...mapMutations(['login','logout']),
			goToLogin(){
				uni.navigateTo({
					url: '../login/login'
				});
				return false
				univerifyLogin().catch((err) => {
					console.log(err,'???')
					if (err === false) return;
					/**
					 * 如果需要强制登录，使用reLaunch方式
					 */
					if (this.forcedLogin) {
						uni.reLaunch({
							url: '../login/login'
						});
					} else {
						uni.navigateTo({
							url: '../login/login'
						});
					}
				})
			},
			guideToLogin() {
				let that =this;
				uni.showModal({
					title: '未登录',
					content: '您未登录，需要登录后才能继续',
					/**
					 * 如果需要强制登录，不显示取消按钮
					 */
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							that.goToLogin()
						}
					}
				});
			},
			goSetUser(){
				uni.navigateTo({
					url:"/pages/my/setUser"
				})
			},
			getUserInfo(){
				// const loginType = uni.getStorageSync('login_type')
				// if (loginType === 'local') {
				// 	this.login(uni.getStorageSync('username'))
				// 	return
				// }
				let uniIdToken = uni.getStorageSync('uni_id_token')
				console.log(uniIdToken,'tt')
				if (uniIdToken) {
					// this.login(uni.getStorageSync('username'))
					uniCloud.callFunction({
						name: 'user-center',
						data: {
							action: 'checkToken',
						},
						success: (e) => {
						
							console.log('checkToken success---我的页面', e);
							this.userInfo=e.result.userInfo
							if (e.result.code > 0) {
								//token过期或token不合法，重新登录
								if (this.forcedLogin) {
									uni.reLaunch({
										url: '../login/login'
									});
								} else {
									uni.navigateTo({
										url: '../login/login'
									});
								}
							}
						},
						fail(e) {
							console.log('??????')
							uni.showModal({
								content: JSON.stringify(e),
								showCancel: false
							})
						}
					})
				} else {
					this.guideToLogin()
				}
			},
			
			goPass(){
				console.log(1)
				uni.navigateTo({
					url:'/pages/my/passwordSetting'
				})
			},
			bindLogout(){
				let that = this;
				uni.showModal({
					title: '确定退出?',
					content: '',
					/**
					 * 如果需要强制登录，不显示取消按钮
					 */
					showCancel: !this.forcedLogin,
					success: (res) => {
						if (res.confirm) {
							this.logoutBtnLoading = true
							uniCloud.callFunction({
								name: 'user-center',
								data: {
									action: 'logout'
								},
								success: (e) => {
							
									console.log('logout success', e);
							
									if (e.result.code == 0) {
										this.logout();
										uni.removeStorageSync('user_id')
										uni.removeStorageSync('uni_id_token')
										uni.removeStorageSync('username')
										uni.removeStorageSync('uni_id_has_pwd')
										/**
										 * 如果需要强制登录跳转回登录页面
										 */
										this.inviteUrl = ''
										if (this.forcedLogin) {
											uni.reLaunch({
												url: '../login/login',
											});
										}
									} else {
										uni.showModal({
											content: e.result.msg,
											showCancel: false
										})
										console.log('登出失败', e);
									}
							
								},
								fail: (e) => {
									uni.showModal({
										content: JSON.stringify(e),
										showCancel: false
									})
								},
								complete: () => {
									this.logoutBtnLoading = false
								}
							})
						}
					}
				});
				
			},
			
			
			
			showModal(e) {
				this.modalName = e.currentTarget.dataset.target
			},
			hideModal(e) {
				this.modalName = null
			},
			Gridchange(e) {
				this.gridCol = e.detail.value
			},
			Gridswitch(e) {
				this.gridBorder = e.detail.value
			},
			MenuBorder(e) {
				this.menuBorder = e.detail.value
			},
			MenuArrow(e) {
				this.menuArrow = e.detail.value
			},
			MenuCard(e) {
				this.menuCard = e.detail.value
			},
			SwitchSex(e) {
				this.skin = e.detail.value
			},

			

			
		}
	}
</script>

<style>
	@import "../../colorui/animation.css";
	.page {
		height: 100Vh;
		width: 100vw;
	}

	.page.show {
		overflow: hidden;
	}

	.switch-sex::after {
		content: "\e716";
	}

	.switch-sex::before {
		content: "\e7a9";
	}

	.switch-music::after {
		content: "\e66a";
	}

	.switch-music::before {
		content: "\e6db";
	}
</style>
<style lang="scss" scoped>
	.user{
		box-sizing: border-box;
		padding: 20rpx;
		background: #fff;
		margin-bottom: 10rpx;
		display: flex;
		justify-content: space-between;
		position: relative;
		.rightIcon{
			position: absolute;
			right: 10rpx;
			top: 50%;
			transform: translateY(-50%);
		}
		.userInfo{
			width: 100%;
			box-sizing: border-box;
			padding-left: 20rpx;
			.userName{
				height: 50%;
			}
			.acount{
				height:50%;
			}
		}
	}
</style>
